<!DOCTYPE html>
<html lang="zn-CH">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/favicon.ico"
        type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒优购</title>
    <!-- 引入icon字体 -->
    <link rel="stylesheet" type="text/css" href="../../public/css/icon-font.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../../public/elementUI/elementUI.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../../public/css/bascis.css">
    <link rel="stylesheet" type="text/css" href="../../public/css/animate.min.css">

    <script src="../../public/js/vue-lazyload.js"></script>
    <!-- 引入组件库 -->
    <script src="../../public/elementUI/elementUI.js"></script>
    <script src="../../public/js/axios.min.js"></script>

    <!-- 局部引入 -->
    <link rel="stylesheet" type="text/css" href="./invitation.css">
</head>

<body>
    <div id="app">



        <header :class="{'bg':!headerBg}">
            <div class="h center">
                <div>
                    <img :src="logoUrl" height="76px">
                </div>
                <div class="right">
                    <a href="../index/index.html">店铺首页</a>
                    <a @click="dialogVisible = true">立即开店</a>
                </div>
            </div>
        </header>


        <div class="top">

            <div class=" animate__animated animate__fadeInLeft custom-classes-transition-enter-to"
                :class="[currentIndex==1?'context-open':'context-close']">
                <img src="../../public/img/manageStores.png" width="256px">
                <div class="p">
                    <p>操作简单，管理方便</p>
                </div>
            </div>

            <div class="title  animate__animated animate__fadeInLeft custom-classes-transition-enter-to"
                :class="{'title-s':currentIndex==1}" @mouseenter="changeCurrentIndex(1)">
                <span>商品管理</span>
            </div>
            <div :class="[currentIndex==2?'context-open':'context-close']"
                class=" animate__animated animate__fadeInLeft custom-classes-transition-enter-to">
                <img src="../../public/img/service.png" width="256px">
                <div class="p">
                    <p>人工智能，自动切换</p>
                </div>
            </div>
            <div class="title  animate__animated animate__fadeInLeft custom-classes-transition-enter-to"
                :class="{'title-s':currentIndex==2}" @mouseenter="changeCurrentIndex(2)">
                <span>智能客服</span>
            </div>
            <div :class="[currentIndex==3?'context-open':'context-close']"
                class=" animate__animated animate__fadeInLeft custom-classes-transition-enter-to">
                <img src="../../public/img/logistics.png" width="256px">
                <div class="p">
                    <p>物流齐全，保证安全</p>
                </div>
            </div>
            <div class="title  animate__animated animate__fadeInLeft custom-classes-transition-enter-to"
                :class="{'title-s':currentIndex==3}" @mouseenter="changeCurrentIndex(3)">
                <span>快速配送</span>
            </div>
            <div :class="[currentIndex==4?'context-open':'context-close']"
                class=" animate__animated animate__fadeInLeft custom-classes-transition-enter-to">
                <img src="../../public/img/store.png" width="256px">
                <div class="p">
                    <p>填表简单，审核快速</p>
                </div>
            </div>
            <div class="title  animate__animated animate__fadeInLeft custom-classes-transition-enter-to"
                :class="{'title-s':currentIndex==4}" @mouseenter="changeCurrentIndex(4)">
                <span>快速开店</span>
            </div>
        </div>
        <div class="introduce center">
            <ul style="margin: 0 auto;">
                <li>
                    <div class="intelText">
                        <h1>智能客服</h1>
                        <p><span>人工客服 </span> 个性化服务 贴心解决问题</p>
                        <p><span>机器客服 </span> 快速回复 分担节省人力</p>
                    </div>
                    <div><img src="../../public/img/introduce-1.png" width="407px" height="250px"></div>
                </li>
                <li>
                    <div><img src="../../public/img/introduce-2.png" width="407px" height="250px"></div>
                    <div class="intelText">
                        <h1 style="text-align: left;">店铺管理</h1>
                        <p><span>管理后台 </span> 页面美观，简洁大方</p>
                        <p><span>管理后台 </span> 操作简单，易于上手</p>
                    </div>

                </li>
                <li>
                    <div class="intelText">
                        <h1>售后管理</h1>
                        <p><span>处理操作 </span> 责任明确，分工得当</p>
                        <p><span>系统日志 </span> 操作记录，事后好查</p>
                    </div>
                    <div><img src="../../public/img/introduce-3.png" width="407px" height="250px"></div>
                </li>
            </ul>
        </div>
        <div class="option ">
            <div style="width: 291px;height: 291px;" class="center">
                <div class="freeRight" @click="dialogVisible = true">
                    <i class="oval1"></i>
                    <i class="oval2"></i>
                    <i class="oval3"></i>
                    <i class="oval4"></i>
                    <section class="title">立即开店</section>
                </div>
            </div>
        </div>
        <footer>

            <div class="center">
                <ul>
                    <li><i class="iconfont iconpinzhibaozhang"></i><span>品质保障</span></li>
                    <li><i class="iconfont icontianmaoqitiantuihuo"></i><span>七天无理由退货</span></li>
                    <li><i class="iconfont icontesefuwu"></i><span>特色服务</span></li>
                    <li><i class="iconfont iconweibiaoti-4"></i><span>急速送达</span></li>
                </ul>
            </div>
            <div class="statement">
                <div class="center">
                    <div class="left">
                        <div class="logo ">
                            <a href="../index/index.html">
                                <img width="140px"
                                    src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png">
                            </a>
                        </div>
                        <p>本网站只用作学习,演示使用,不做其他用途。</p>
                        <p>网站中的商品均为虚拟商品，不做真实出售。请勿付款!</p>
                        <p style="margin-top: 20px;">©Second you buy, powered by 苗文青 2021.</p>
                    </div>
                    <div class="right">
                        <h1>相关链接</h1>
                        <a target="_blank" href="https://www.iconfont.cn/">iconfont</a>
                        <a target="_blank" href="https://element.eleme.cn/#/zh-CN">ElementUI</a>
                        <a target="_blank" href="https://cn.vuejs.org/">Vue</a>
                        <a target="_blank" href="https://shop.vivo.com.cn/">VIVO</a>
                        <a target="_blank" href="https://animate.style/">Animate</a>
                        <a target="_blank" href="https://www.xiaomiyoupin.com/">小米有品</a>
                    </div>
                </div>
            </div>
        </footer>
        <el-dialog :visible.sync="dialogVisible" width="45%" center>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" v-show="step==1">
                <el-form-item label="申请者姓名" prop="dirName">
                    <el-input v-model="ruleForm.dirName"></el-input>
                </el-form-item>
                <el-form-item label="申请者身份证号" prop="dirId">
                    <el-input v-model="ruleForm.dirId"></el-input>
                </el-form-item>
                <el-form-item label="申请者联系电话" prop="dirTel">
                    <el-input v-model="ruleForm.dirTel"></el-input>
                </el-form-item>
                <el-form-item label="申请者邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="店铺营业执照" prop="busLicense">
                    <el-input v-model="ruleForm.busLicense"></el-input>
                </el-form-item>
                <el-form-item label="店铺名" prop="storeName">
                    <el-input v-model="ruleForm.storeName"></el-input>
                </el-form-item>
                <el-form-item label="店铺简介" prop="storeDes">
                    <el-input v-model="ruleForm.storeDes"></el-input>
                </el-form-item>
            </el-form>
            <div class="apply-ok" v-show="step==2">
                <i class="el-icon-success"></i>
                <h1>申请提交成功</h1>
                <p>审核后，将向以邮件的方式通知您，请注意查收</p>
            </div>

            <div class="apply-error" v-show="step==3">
                <i class="el-icon-error"></i>
                <h1>申请提交失败</h1>
                <p>当前手机号已申请过店铺</p>
            </div>
            <span slot="footer" v-show="step==1">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit()">申请</el-button>
            </span>
            <span slot="footer" v-show="step==3">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="step=1">重新填写申请</el-button>
            </span>
        </el-dialog>

    </div>

</body>
<script>
    const baseUrl = 'http://182.92,221.225:8888'
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '../../public/img/error.png',
        loading: '../../public/img/loading.png',
        attempt: 1
    })
    var email = (rule, value, callback) => {
        if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(value)) {
            callback(new Error('请输入正确的邮箱'));
        } else {
            callback();
        }
    };
    var idNumber = (rule, value, callback) => {
        if (!/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/.test(value)) {
            callback(new Error('请输入正确的身份证号码'));
        } else {
            callback();
        }
    };
    var tel = (rule, value, callback) => {
        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
            callback(new Error('请输入正确的手机号码'));
        } else {
            callback();
        }
    };
    var app = new Vue({
        el: '#app',
        data: {
            logoUrl: 'https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png',
            currentIndex: 4,
            dialogVisible: false,
            headerBg: true,
            fullHeight: '', //fullHeight: document.documentElement.clientHeight  屏幕高度 默认值
            ruleForm: {
                dirId: '',
                dirName: '',
                dirTel: '',
                email: '',
                busLicense: '',
                storeDes: '',
                storeName: ''
            },

            step:'1',
            rules: {
                dirName: [{
                    required: true,
                    message: '请输入申请者姓名',
                    trigger: 'blur'
                }],
                dirId: [{
                        required: true,
                        message: '请输入申请者身份证号',
                        trigger: 'blur'
                    },
                    {
                        validator: idNumber,
                        trigger: 'blur'
                    }
                ],
                dirTel: [{
                    required: true,
                    message: '请输入申请者手机号',
                    trigger: 'blur'
                }, {
                    validator: tel,
                    trigger: 'blur'
                }],
                email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    },
                    {
                        validator: email,
                        trigger: 'blur'
                    }
                ],
                busLicense: [{
                    required: true,
                    message: '请输入店铺营业执照',
                    trigger: 'blur'
                }],
                storeDes: [{
                    required: true,
                    message: '请输入店铺描述',
                    trigger: 'blur'
                }],
                storeName: [{
                    required: true,
                    message: '请输入店铺名',
                    trigger: 'blur'
                }],
            }
        },

        mounted() {
            this.fullHeight = `${document.documentElement.clientHeight}`; //默认值
            window.addEventListener('scroll', this.scrollToTop)
        },
        updated() {

        },
        methods: {
            scrollToTop() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
                    .scrollTop;
                if (scrollTop > this.fullHeight) {
                    this.headerBg = false
                } else {
                    this.headerBg = true
                }
            },
            changeCurrentIndex(index) {
                this.currentIndex = index
            },
            submit() {

                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        axios.post(baseUrl + '/admin/store/apply', {
                                dirId: this.ruleForm.dirId,
                                dirName: this.ruleForm.dirName,
                                dirTel: this.ruleForm.dirTel,
                                email: this.ruleForm.email,
                                busLicense: this.ruleForm.busLicense,
                                storeDes: this.ruleForm.storeDes,
                                storeName: this.ruleForm.storeName,
                            })
                            .then( (response)=> {
                                if (response.data.code == 2000) {
                                       this.step=2
                                }else{
                                    this.step=3
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });









            },


        },

    })
</script>





</html>